---
title: Next.js
description: Reglas de lint específicas para Next.js en Ultracite.
---

La configuración de Next.js incluye reglas de lint específicas para la optimización de imágenes, la estructura del documento y los patrones del App Router.

## Instalación

Agrega la configuración de Next.js a tu `biome.jsonc`:

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/next"]
}
```

## Descripción general

Esta configuración añade reglas específicas para el desarrollo con Next.js:

- **Optimización de imágenes**: Forzar el uso del componente Image de Next.js
- **Estructura del documento**: Evitar el uso indebido de componentes especiales de Next.js
- **Componentes de cliente**: Asegurar que los componentes de cliente asíncronos se gestionen correctamente
- **Archivos de configuración**: Manejo especial para archivos `next.config.*`

## Reglas específicas de Next.js

### Incubadora

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `noNextAsyncClientComponent` | `error` | Evita componentes de cliente asíncronos en Next.js. Los componentes de cliente deben ser síncronos; utiliza componentes de servidor para operaciones asíncronas. |

### Rendimiento

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `noImgElement` | `error` | Prohibir el uso del elemento HTML `<img>`. Utiliza el componente `<Image>` de Next.js en su lugar para la optimización automática de imágenes. |

### Estilo

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `noHeadElement` | `error` | Prohibir el uso del elemento HTML `<head>`. Usa `next/head` de Next.js o la API de metadatos del App Router en su lugar. |

### Sospechosas

| Regla | Configuración | Descripción |
|------|---------|-------------|
| `noDocumentImportInPage` | `error` | Evita importar `next/document` en archivos de página. `_document.tsx` solo debe existir en `pages/_document.tsx`. |
| `noHeadImportInDocument` | `error` | Evita importar `next/head` en `_document.tsx`. Usa `<Head>` de `next/document` en su lugar. |

## Anulaciones de archivos de configuración

El preset de Next.js incluye un manejo especial para archivos de configuración y componentes del App Router:

### Archivos de configuración de Next.js

```jsonc
{
  "overrides": [
    {
      "includes": ["next.config.*"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Esto permite patrones de configuración de Next.js que normalmente podrían no pasar las reglas de linting.

### Páginas y layouts del App Router

```jsonc
{
  "overrides": [
    {
      "includes": ["**/page.{ts,tsx,js,jsx}", "**/layout.{ts,tsx,js,jsx}"],
      "linter": {
        "rules": {
          "suspicious": {
            "useAwait": "off"
          }
        }
      }
    }
  ]
}
```

Los componentes de página y layout del App Router pueden ser asíncronos sin requerir `await`, ya que Next.js los gestiona de forma especial para el renderizado del lado del servidor y la obtención de datos.